<template>
	<div>
	<!-- 热销推荐 -->
	<div class='recommend'>热销推荐</div>
	<!-- 推荐模块 -->
	<ul>
		<!-- <router-link tag='' to='/detail'>
	     router-link是一个a标签会变颜色 将此变为li标签 -->
		<router-link tag='li' class='item border-bottom' v-for='item in itemList' :key='item.id' :to="'/detail/'+item.id" >
				<img class='img' :src='item.imgUrl'>
			<div class='item-info'>
				<p class='title'>{{item.title}}</p>
				<p class='desc'>{{item.desc}}</p>
				<button class='button'>查看详情</button>
			</div>
		</li>
	   </router-link>
	</ul>
</div>
</template>
<script>
	export default{
		name:'HomeRecommend',
		props:{
			itemList:Array
		}
	}
</script>
<style lang='stylus' scoped>
@import '~styles/iconfont/mixins.styl'
.recommend
	margin-top:0.2rem
	background:#eee
	line-height:0.8rem
	text-indent:0.2rem
.item
	
	height:1.9rem
	display:flex
	.img
		width:1.7rem
		height:1.7rem
		padding:0.1rem
	.item-info
		flex:1
		padding:0.1rem
		min-width:0
		.title
			line-height:0.54rem
			font-size:0.32rem
			ellipsis()
		.desc
			line-height:0.4rem
			color:#ccc
			ellipsis()
		.button
			line-height:0.3rem
			margin-top:0.16rem
			background:#ff9300
			padding:0.08rem
			border-radius:0.06rem
			color:#fff
		
</style>